<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>seedforweb.cn</title>
    <style type="text/css" scoped="scoped">
        @import "css/hybrid.min.css";
        @import "css/table-style.css";
        @import "js/highlight.min.js";
        @import "dist/stylesheets/thinker-md.user.css";
        @import "dist/stylesheets/thinker-md.vendor.css";
        @import "dist/emoji/nature.css";
        @import "dist/emoji/object.css";
        @import "dist/emoji/people.css";
        @import "dist/emoji/place.css";
        @import "dist/emoji/Sysmbols.css";
        @import "dist/emoji/twemoji.css";
    </style>
    <script src="js/jquery-3.0.0.js"></script>
    <script type="text/javascript" src="js/showdown.min.js"></script>
    <script src="js/highlight.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="dist/javascripts/thinker-md.vendor.min.js"></script>
</head>
<style>

</style>
<body>

    <div id="article_editor">
        <input id="art_title" placeholder="文章标题：那是梦开始的地方" />
        <input id="choice_albums" placeholder="在这里选择所属专辑">
        <input id="choice_tags" placeholder="在这里添加或选择标签">
        <div id="tagDataList">
            <button>java</button>
            <button>javascpript</button>
            <button>java</button>
            <button>java</button>
            <button>java</button>
            <button>java</button>
            <button>java</button>
        </div>

        <div id="editor">
            <div id="e_head">editor_head</div>
            <div id="editor_body">
                <div id="e_content">
                    <textarea placeholder="在这里编写内容" ></textarea>
                    <!--<textarea id="e_textarea" style="width: 50px" onkeyup="compile()" placeholder="在这里编写内容"></textarea>-->
                </div>
                <!--<div id="editor_vertical_wall"></div>-->
                <!--<div id="preview"></div>-->

            </div>
        </div>
        <!-- hidden window-->
        <div id="hideWindow" style="display: none">
            <div class="win_background transparent_class"></div>
            <div id="window_panel">
                <div id="window">
                    <div id="win_head">
                        <span id="win_title">创建标签</span>
                        <a id="win_close" href="javascript:void(0);">×</a>
                    </div>
                    <div id="win_body">
                        <input id="tag_add_name" placeholder="请输入标签名称"/>

                        <textarea id="tag_add_desc" placeholder="请输入标签描述"></textarea>

                        <button id="tag_add_confirm" name="确定">确 定</button>
                        <button id="tag_add_cancel" name="取消" value="取消">取 消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

<script>
//    //编辑器大小调整js
//    var initMethod = function initSize(){
//        $("#editor_body").height(window.innerHeight-100);
//        var editorBodyHeight = $("#editor_body").height();
//        var editorBodyWidth = $("#editor_body").width();
//        var editorWidth = editorBodyWidth/2-15;
//        var verticalWallWidth = 15;
//        var previewWidth = editorBodyWidth - verticalWallWidth - editorWidth-4;
//        $("#e_textarea").height(editorBodyHeight);
//        $("#e_textarea").width(editorWidth);
//        $("#editor_vertical_wall").height(editorBodyHeight);
//        $("#editor_vertical_wall").width(verticalWallWidth);
//        $("#preview").height(editorBodyHeight);
//        $("#preview").width(previewWidth);
//
//    }
//    initMethod();
//
//    $(window).resize( function(){
//        initMethod();
//    });
//
//
//    //md装换js
//
//    var formatPreCode = function(){
//        $('pre code').each(function(i, block) {
//            hljs.highlightBlock(block);
//        });
//    }
//
//    function compile(){
//        var text = $("#e_textarea").val();
//        var converter = new showdown.Converter();
//        showdown.setOption("tables",true)
//        var html = converter.makeHtml(text);
//        $("#preview").html(html);
//        formatPreCode();
//
//    }
//
//    //textArea支持tab
//    $("textarea").on('keydown',function(e){
//        if(e.keyCode == 9){
//            e.preventDefault();
//            var indent = '    ';
//            var start = this.selectionStart;
//            var end = this.selectionEnd;
//            var selected = window.getSelection().toString();
//            selected = indent + selected.replace(/\n/g,'\n'+indent);
//            this.value = this.value.substring(0,start) + selected + this.value.substring(end);
//            this.setSelectionRange(start+indent.length,start+selected.length);
//        }
//    })

    $("#choice_tags").on("keydown",function(e){
//
        if(e.keyCode == 13){
            console.log(e.keyCode);
            var existedTags = [{"id":1,"name":"java","desc":"一种神奇的语言"},{"id":2,"name":"js","desc":"另外一种神奇的语言"}];
            console.log(existedTags);
            for(var i = 0;i < existedTags.length;i++){
                alert(existedTags[i].name);
            }
        }
    })



</script>

<script>
    $("textarea").markdown({
        language: 'zh',
        fullscreen: {
            enable: true
        },
        resize: 'vertical',
        localStorage: 'md',
        imgurl: '/c/imgUpload',
        base64url: '/c/imgUpload',
        flowChart : true,
        savable:true
    });
</script>
</html>